<template>
	<view class="container">
		<view class="topFixed">
			<view class="topNav d-cw d-ac d-jc">
				<view class="topNav-min d-cw d-ac d-jc">
					<view class="" style="width: 94%;">
						<view class="topNav-min-left d-rn d-ac d-jb">
							<image src="../../static/img/bottom.png" mode="" @click="back"></image>
							<text>{{acceptInfo.performanceName}}</text>
							<image src="" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<jixiaoqiangqing ref='jixiaoqiangqing'></jixiaoqiangqing>
		<view class="list">
			<view class="list-one" v-for="(item,index) in infoList" :key="index">
				<view class="list-one">
					<view class="list-one-title">
						<!-- {{index+1}}、{{item.topic.topicList}} -->
						<view>{{index+1}}、<span
								v-if="item.percentage">【{{item.percentage}}%】</span><span>{{item.performanceTopic}}</span>
						</view>
					</view>
					<view class="list-one-mark d-rn d-ac d-jb" v-if="item.topicType != 1">
						<text>{{ $t('score_title') }}</text>
						<u--input type="number" input-align="right" v-model="item.scoringValue" border="false"
							@change="formatter(item,index)"></u--input>
						<text>{{$t('score')}}({{item.highestScore}}{{ $t('score') }})</text>
					</view>
					<view class="list-one-word" v-if="item.topicType != 2">
						<text>{{ $t('comment') }}</text>
						<u--textarea border="false" v-model="item.performanceReviewRemark" name="" id="" cols="30"
							rows="3" :placeholder="$t('please_enter_comment')"></u--textarea>
					</view>

				</view>
			</view>
			<view class="list-ping">
				<view class="list-ping-word">
					<text>{{ $t('performance_evaluation') }}</text>
					<textarea v-model="overallScore" name="" id="" cols="30" rows="10"
						:placeholder="$t('please_enter_comment')"></textarea>
				</view>
			</view>

			<view class="list-btn d-rn d-ac d-jc">
				<text class="d-rn d-ac d-jc" @click="handlereset">{{ $t('clear_review') }}</text>
				<text class="d-rn d-ac d-jc" @click="handleCun">{{$t('draft')}}</text>
				<text class="d-rn d-ac d-jc" @click="handleSubmit">{{ $t('submit_score') }}</text>
			</view>
		</view>


	</view>
</template>

<script>
	import jixiaoqiangqing from "../jixiaoqiangqing/index.vue"
	var _self
	import {
		topiclists,
		systemScore,
		performanceScore,
		getPerformanceInfo,
		getPerformanceEmployeeTopic,
		saveDraftEvaluationScoring
	} from '../../api/index.js';
	import moment from "moment";
	export default {
		components: {
			jixiaoqiangqing
		},
		data() {
			return {
				acceptInfo: {},
				infoList: [],
				pageNum: 1,
				pageSize: 10,
				hasPage: false,
				total: 0,
				totalPage: 0,
				list: [],
				overallScore: '',
				// tableId:'',
				nowMonth: '',
				infoListBak: [],
			}
		},
		onLoad(options) {
			_self = this;
			if (options && options.data) {
				_self.acceptInfo = JSON.parse(decodeURIComponent(options.data))
			}
			var today = new Date();
			_self.nowMonth = today.getMonth() + 1
			// _self.gettopiclists()
			_self.gettableDe()
			
		},
		computed: {

		},
		methods: {
			gettableDe() {
				// _self.acceptInfo.ptableId = _self.acceptInfo.ptableId.replace(/\"/g, "");
				getPerformanceEmployeeTopic({
					id: _self.acceptInfo.id
				}).then(res => {
					if (res.code == 200) {
						this.infoList = res.data;
						this.overallScore = res.overallPerformanceReviewRemark;
						this.infoListBak = JSON.parse(JSON.stringify(res.data));
						
						
						this.$refs.jixiaoqiangqing.onload(this.acceptInfo)
					}
				})
			},
			formatter(item, index) {
				if (!/^[0-9]+$/.test(item.scoringValue)) item.scoringValue = item.scoringValue.replace(/\D/g, '');
				if (Number(item.scoringValue) > Number(item.highestScore)) {
					this.$nextTick(() => {
						this.$set(this.infoList[index], 'scoringValue', item.highestScore)
					})
				}
				if (Number(item.scoringValue) < 0) {
					item.scoringValue = null
				}
			},
			back() {
				_self.$commonFun.goUrl(1, '../performance/index')
			},
			handlereset() {
				this.infoList = this.infoListBak
			},
			handleCun() {
				let data = {
					performanceEmployeeId: _self.acceptInfo.id,
					topicVOList: this.infoList,
					overallPerformanceReviewRemark: this.overallScore
				}
				saveDraftEvaluationScoring(data).then(res => {
					if (res.code == 200) {
						_self.$commonFun.showTips(res.msg);
						setTimeout(function() {
							_self.$commonFun.goUrl(3, '../performance/index')
						}, 2000);
					}
				})



			},
			handleSubmit() {
				let data = {
					performanceEmployeeId: _self.acceptInfo.id,
					topicVOList: this.infoList,
					overallPerformanceReviewRemark: this.overallScore
				}
				performanceScore(data).then(res => {
					if (res.code == 200) {
						_self.$commonFun.showTips(res.msg);
						setTimeout(function() {
							_self.$commonFun.goUrl(3, '../performance/index')
						}, 2000);
					}
				})

			},
			// gettopiclists() {
			// 	topiclists({
			// 		userId: JSON.parse(uni.getStorageSync('loginInfo')).userid,
			// 		id: _self.acceptInfo.id,
			// 		pageNum: _self.pageNum,
			// 		pageSize: _self.pageSize
			// 	}).then(res => {
			// 		if (res.code == 200) {
			// 			_self.infoList = res.rows;

			// 			_self.total = res.total;
			// 			_self.totalPage = _self.pageNum * _self.pageSize
			// 			if (_self.totalPage > res.total) {
			// 				_self.hasPage = false
			// 			} else {
			// 				_self.hasPage = true
			// 			}

			// 		}
			// 	})
			// },
		},
		onReachBottom() {
			if (_self.hasPage) {
				_self.pageNum++;
				_self.hasPage = false;
				// _self.gettopiclists()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;

	}

	.container {
		width: 100%;

		.topFixed {
			width: 100%;
			position: fixed;
			z-index: 60;
			top: 0;
			left: 0;
		}

		// 导航栏
		.topNav {
			width: 100%;
			box-sizing: border-box;
			position: relative;
			height: 100rpx;
			background-color: #FFD03D;

			&-min {
				width: 100%;
				position: absolute;
				left: 0;

				&-left {
					text {
						font-size: 36rpx;
						font-weight: 500;
						color: #17171a;
					}

					image {
						width: 32rpx;
						height: 20rpx;
						transform: rotate(90deg);
					}
				}

				&-right {
					&-picker {
						width: 186rpx;
						padding: 8rpx 24rpx;
						box-sizing: border-box;
						background-color: #FFE182;
						border-radius: 2em;

						.picker-con {
							.uni-input {
								max-width: 112rpx;
								font-size: 28rpx;
								color: #17171a;
							}
						}

						image {
							width: 18rpx;
							height: 10rpx;
							margin-left: 12rpx;
						}
					}
				}


			}
		}

		.list {
			width: 100%;
			margin-top: 120rpx;

			&-one {
				margin-bottom: 20rpx;

				&-title {
					font-size: 32rpx;
					color: #22222b;
					padding-bottom: 20rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #eeeeee;
					background-color: #ffffff;
					padding: 24rpx;
					box-sizing: border-box;
				}

				&-mark {
					border-bottom: 1px solid #eeeeee;
					background-color: #ffffff;
					padding: 24rpx;
					box-sizing: border-box;

					text {
						font-size: 28rpx;
						color: #6c6c6c;
					}

					input {
						flex: 1;
						text-align: right;
						margin-right: 10rpx;
					}
				}

				&-word {
					padding: 24rpx;
					box-sizing: border-box;
					background-color: #ffffff;

					text {
						font-size: 28rpx;
						color: #6c6c6c;
					}

					textarea {
						margin-top: 20rpx;
						width: 100%;
						font-size: 28rpx;
						color: #6c6c6c;
					}
				}

			}

			&-ping {
				padding: 24rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				margin-top: 20rpx;

				text {
					font-size: 28rpx;
					color: #6c6c6c;
				}

				textarea {
					margin-top: 20rpx;
					width: 100%;
					font-size: 28rpx;
					color: #6c6c6c;
				}
			}



			&-btn {
				width: 100%;
				background-color: #ffffff;
				padding: 24rpx 0;
				box-sizing: border-box;
				margin-top: 20rpx;

				text {
					font-size: 26rpx;
				}

				text:nth-of-type(1),
				text:nth-of-type(2) {
					width: 152rpx;
					height: 58rpx;
					border-radius: 2em;
					border: 1px solid #E5E5E5;
				}

				text:nth-of-type(2) {
					margin: 0 16rpx;
				}

				text:nth-of-type(3) {
					border: 1px solid #FFDA32;
					width: 240rpx;
					height: 58rpx;
					border-radius: 2em;
					background-color: #FFDA32;
				}
			}

		}



	}
</style>